<template>
  <div>
    <TitleCompound :title="title"></TitleCompound>

    <!-- content -->
    <div>
      <h3>the counter is {{ counterStore.count }}</h3>

      <h3>Persons:</h3>
      <el-table :data="personStore.persons" class="persontable" border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="Id" width="240" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="age" label="Age" width="180" />
        <el-table-column prop="gender" label="Gender" width="180" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TitleCompound from "@/components/TitleCompound.vue";
import { useCounterStore } from "@/stores/counter";
import { usePersonStore } from "@/stores/Person";

const title = "Pinia Child"

const counterStore = useCounterStore()
const personStore = usePersonStore()

</script>
<style lang="scss" scoped></style>
